import { FC, useEffect, useState } from "react"
import { Card, message } from 'antd';
import style from "./index.module.scss"
import { ClassfiyAll } from "../../untils/api"
import AForm from "../../compent/AForm";
import { AformConfig } from "./config/index"
import { Button, Tag, Checkbox, Form, Input } from 'antd';
import { useForm } from "rc-field-form";

const Classfiy: FC = () => {
    const [form] = Form.useForm()
    const [data, setData] = useState([])
    const [visible, setVisible] = useState(false)
    const [classupdataObj, setClassupdataObj] = useState<any>({})

    const onFinish = (values: any) => {
        if (visible) {
            handleUpdata(classupdataObj.id, values)
        } else {
            const data = values
            console.log(data)
            ClassfiyAll.addClassfiy(data).then(res => {
                console.log(res)
                if (res.data.statusCode) {
                    message.success("添加成功")
                }
                getList()
            })
            // form.setFieldsValue()
            form.setFieldsValue({ label: '', value: '' })
        }

    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    useEffect(() => {
        getList()
    }, [])

    //获取数据
    const getList = () => {
        ClassfiyAll.getAllClass().then(res => {
            console.log(res.data.data)
            setData(res.data.data)
        })
    }
    //回显数据
    const edit = (item: any) => {
        console.log(item)
        setVisible(true)
        form.setFieldsValue({ label: item.label, value: item.value })
        setClassupdataObj(item)
    }
    //返回添加
    const handleBack = () => {
        setVisible(false)
        form.setFieldsValue({ label: '', value: '' })
    }
    //更新
    const handleUpdata = (id:any,values:any) => {
        setVisible(false)
        const data = {
            label: values.label,
            value: values.value,
        }
        ClassfiyAll.updataClass(classupdataObj.id, data).then(res => {
            console.log(res)
        })
         //重新调用获取数据接口
         getList()
         //清空表单
         form.setFieldsValue({ label: '', value: '' })

    }
    //删除
    const handleDelet = (classupdataObj: any) => {
        ClassfiyAll.detaleClass(classupdataObj.id).then(res => {
            console.log(res.data)
            if (res.data.statusCode) {
                message.success("删除成功")
            }
            setVisible(false)
            getList()
        })
        form.setFieldsValue({ label: '', value: '' })
       
    }
    return (
        <div className={style["class-fiy"]}>
            <div className={style["class-fiy-left"]}>
                <Card title={visible ? "管理分类" : "添加分类"} >
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            name="label"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            name="value"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item >
                            <Button type="primary" htmlType="submit" onClick={() => handleUpdata } >
                                {visible ? "更新" : "保存"}
                            </Button>
                            <Button>
                                {
                                    visible ? <div className="back">
                                        <Button onClick={() => { handleBack() }}>返回添加</Button>
                                        <Button onClick={() => { handleDelet(classupdataObj) }}>删除</Button>
                                    </div> : ""
                                }
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>

            </div>
            <div className={style["class-fiy-right"]}>
                <Card title="所有分类" >
                    {
                        data && data.map((item: any, index) => {
                            return <Tag onClick={() => { edit(item) }}>{item.label}</Tag>
                        })
                    }

                </Card>
            </div >

        </div>
    )
}

export default Classfiy